<template>
    <div id="topmain" class="full main">
      <!-- 中间地图 -->
      <arvideo
        ref="mainv"
        :vid="state.vid"
        :ev="state.hasev"
        :istw="state.istw"
        @change="bqclick"
        @back="backAr"
        @reget="reget"
        @setdiruction="setdiruction"
        @list="
          (v) => {
            state.bqlist = v;
          }
        "
        @alarm="alarm"
      />
      <!-- 高点下面的球机 -->
      <div class="small-video">
        <xzhbBigSmall
          class="hbcssmall"
          :vid="state.vid"
          :tp="state.bqtype"
          @close="closeBig"
        />
        <onem ref="refv" vid="1955472120574251009" />
      </div>
      <!-- 电子放大 -->
      <xzhbBig
        class="hbcs"
        :vid="state.vid"
        :tp="state.bqtype"
        @close="closeBig"
      />
      
    </div>
  </template>
  
  <script setup>
  import znz from "./home/znz.vue";
  import login from "./home/login.vue";
  import note from "./home/note.vue";
  import search from "./home/search.vue";
  import evinfo from "./home/evinfo.vue";
  import tagf from "./home/tagf.vue";
  import onev from "./home/onev.vue";
  import bkpm from "./home/bkpm.vue";
  import bkv from "./home/bkv.vue";
  import infos from "./home/infos.vue";
  import xzdxm from "./home/xzdxm.vue";
  import xzhb from "./home/xzhb.vue";
  import xzhbBig from "./home/xzhbBig.vue";
  import xzhbBigSmall from "./home/xzhbBigSmall.vue";
  import xzdian from "./home/xzdian.vue";
  import bqinfo from "./home/bqinfo.vue";
  import yalist from "./home/yalist.vue";
  import yaedit from "./home/yaedit.vue";
  import yaview from "./home/yaview.vue";
  import syslist from "./home/syslist.vue";
  import tj from "./home/tj.vue";
  import zoomv from "./home/zoom.vue";
  import mapCom from "./home/map.vue";
  import smallVideo from "./home/smallVideo.vue";
  import dgSelect from "./home/gd.vue";
  import rtsp from "./home/rtsp.vue";
  import addPlan from "./home/addPlan.vue"; // 引入弹窗组件
  import { ElMessage } from "element-plus";
  import emitter from "@/utils/mitt";
  import { nextTick } from "vue";
  const state = reactive({
    istw: false, //图文模式
    showSmallvalue: false, //低点视频画面
    ggshow: true, //操作层
    lgshow: false, //登录
    ntshow: false, //公告
    mnshow: false, //菜单
    evshow: false, //事件
    hasev: false, //有无报警信息
    tgshow: false, // 标签过滤
    bkshow: false, //回放参数
    bkvshow: false, //回放
    ddshow: false, //ptz
    ifshow: false, //全景
    is3d: false, //3d
    bqshow: false, //选择
    syshow: false, //系统设置
    tjshow: false, //统计视图
    bqstep: 0, //标签添加 0不显示1选择2点线面3数据
    bqtype: 0, //新增时标签类型，1点2线3面
    bqdata: null, //点线面数据
    yastep: 0, //预案 0不显示1预案列表2新增预案 3轮询
    yav: {}, //轮询预案查看参数
    yavinx: -1, //轮询索引
    msg: "",
    vid: "", //当前高点id
    gid: "", //选择的高点id
    did: "", //选择的低点id
    zoomdid: "", //联动id
    vids: [],
    notices: [], //公共列表数据
    bqdata: {}, //点击标签带回的数据
    bqleft: 888, //标签位置
    bqTop: 0,
    isForm: false, //是否需要向上移动
    isd: false, //是否编辑标签
    bqlist: [], //当前显示的标签
    zoomfull: false,
    tags: [],
    rtspvid: "",
    rtspdid: "",
  });
  
  // 控制新增预案的弹窗
  const showAddDialog = ref(false);
  // 在父组件中添加方法
  const handleNewPlan = () => {
    console.log("新增预案");
    showAddDialog.value = true;
  };
  const changeIsTw = () => {
    state.istw = !state.istw;
  };
  
  const mainv = ref();
  const hideAll = () => {
    //state.ntshow= false//公告
    state.mnshow = false; //菜单
    state.evshow = false; //事件
    state.tgshow = false; // 标签过滤
    state.bkshow = false; //回放参数
    state.bkvshow = false; //回放
    state.ddshow = false; //ptz
    state.ifshow = false; //全景
    state.bqshow = false; //选择
    state.syshow = false; //系统设置
    state.tjshow = false; //统计视图
    state.bqstep = 0; //标签添加 0不显示1选择2点线面3数据
    state.bqtype = 0; //新增时标签类型，1点2线3面
    state.yastep = 0; //预案 0不显示1预案列表2新增预案 3轮询
  };
  const shownote = (s) => {
    state.msg = s;
    state.ntshow = false;
    nextTick(() => {
      state.ntshow = true;
    });
  };
  //统计
  const tjclick = () => {
    state.ggshow = false;
    hideAll();
    nextTick(() => {
      state.tjshow = true;
    });
  };
  //新增标签
  const addclick = () => {
    state.mnshow = false;
    hideAll();
    nextTick(() => {
      state.bqstep = 1;
    });
  };
  //点线面选择
  const dxmchange = (tp) => {
    state.bqtype = tp;
    nextTick(() => {
      state.bqstep = 2;
    });
  };
  //点线面选择完毕
  const dxmover = (data) => {
    state.bqdata = data;
    nextTick(() => {
      state.bqstep = 3;
    });
  };
  //标签数据完毕
  const bqover = () => {
    //保存数据到后台完成
    nextTick(() => {
      state.bqstep = 0;
    });
  };
  const ifclick = () => {
    hideAll();
    nextTick(() => {
      state.ifshow = true;
    });
  };
  const evclick = () => {
    hideAll();
    nextTick(() => {
      state.evshow = true;
    });
  };
  const tgclick = () => {
    hideAll();
    nextTick(() => {
      state.tgshow = true;
    });
  };
  const zoomclick = () => {
    hideAll();
    if (state.is3d == false) {
      state.is3d = true;
    } else {
      state.is3d = false;
    }
    mainv.value.zoom();
  };
  //标签过滤后，将选择值赋值给底层AR
  const tagchange = (val) => {
    state.tags = val;
    mainv.value.setTypes(val);
  };
  const getTags = () => {
    useApi
      .post("/arhome/system/tagcategory/list", {
        tagCategoryName: "",
        tagCategoryState: null,
      })
      .then((res) => {
        let data = res.data.tagCategory4SysList || [];
        state.tags = data.map((x) => x.tagCategoryId);
      });
  };
  //预案
  const yaclick = () => {
    hideAll();
    state.mnshow = false;
    state.yastep = 0;
    nextTick(() => {
      state.yastep = 1;
    });
  };
  const bkclick = () => {
    state.mnshow = false;
    hideAll();
    nextTick(() => {
      state.bkshow = true;
    });
  };
  
  // 电子放大
  let bigCanvas = ref(false);
  const bigDong = () =>{
    bigCanvas.value = true
  }
  
  const closeBig = () =>{
    bigCanvas.value = false
  }
  
  const sysclick = () => {
    state.mnshow = false;
    hideAll();
    nextTick(() => {
      state.syshow = true;
    });
  };
  const pmok = () => {
    state.bkshow = false;
    state.bkvshow = false;
    nextTick(() => {
      state.bkvshow = true;
    });
  };
  //标签点击
  const bqclick = (e, isd) => {
    state.bqshow = false;
    state.bqdata = e;
    state.isd = isd;
    console.log("特殊提示：", state.isd);
    let w = document.documentElement.clientWidth;
    let h = document.documentElement.clientHeight;
    let x = parseFloat(e.x) / 100;
    let y = parseFloat(e.y) / 100;
    if (y > 0.7) {
      state.bqTop = y * h;
      state.isForm = true; //如果y大于0.8，说明是低点，表单在下方
    } else {
      state.bqTop = y * h;
      state.isForm = false;
    }
    if (x > 0.7) {
      state.bqleft = x * w - 450;
    } else {
      state.bqleft = x * w + 100;
    }
    nextTick(() => {
      state.bqshow = true;
      setTimeout(() => {
        drag("bqdrag");
      }, 500);
    });
  };
  
  const drag = (id) => {
    var draggable = document.getElementById(id);
    var isDraggable = false;
    var offset = { x: 0, y: 0 };
    draggable.addEventListener("mousedown", function (e) {
      isDraggable = true;
      offset.x = e.clientX - draggable.offsetLeft;
      offset.y = e.clientY - draggable.offsetTop;
      e.preventDefault();
    });
    draggable.addEventListener("mousemove", function (e) {
      if (isDraggable) {
        draggable.style.left = e.clientX - offset.x + "px";
        draggable.style.top = e.clientY - offset.y + "px";
      }
    });
    draggable.addEventListener("mouseup", function (e) {
      isDraggable = false;
    });
  };
  
  const backAr = (gid, did, respgid, rtspdid, irtCameraIndexCode) => {
    state.vid = gid;
    state.zoomdid = did;
    state.rtspvid = respgid;
    state.rtspdid = rtspdid;
    window.parent.postMessage(
      {
        type: "iframe",
        data: {
          cameraId: gid,
          cameraIndexCode: respgid,
          movedCameraIndexCode: rtspdid,
          irtCameraIndexCode: irtCameraIndexCode,
        },
      },
      "https://vp.bcdtech.cn:8787"
    );
  };
  //高点切换
  const gdchange = (node) => {
    state.vid = node.cameraId;
    //state.vid = '1766027258688049162'
    state.rtspvid = node.cameraIndexCode;
    state.rtspdid = node.movedCameraIndexCode;
    window.parent.postMessage(
      {
        type: "iframe",
        data: {
          cameraId: node.cameraId,
          cameraIndexCode: node.cameraIndexCode,
          moveCameraIndexCode: node.moveCameraIndexCode,
          irtCameraIndexCode: node.irtCameraIndexCode,
        },
      },
      "https://vp.bcdtech.cn:8787"
    );
  };
  //低点切换
  const ddchange = (node) => {
    state.did = node.cameraId;
    state.ddshow = true;
  };
  //预案轮询
  const planview = () => {
    let store = useMyStore();
    state.yav = store.params.yav || {};
    if (state.yav.time) {
      state.yavinx = -1;
      state.yastep = 3;
      plan();
    }
  };
  //轮询
  const plan = () => {
    state.yavinx++;
    if (state.yavinx >= state.yav.plans.length) {
      state.yavinx = 0;
    }
    state.vid = state.yav.plans[state.yavinx].highCameraId;
    state.vids = state.yav.plans[state.yavinx].lowCameraIds;
    setTimeout(() => {
      plan();
    }, 1000 * 60 * state.yav.time);
  };
  //结束轮询
  const overplan = () => {
    clearTimeout();
    state.yavinx = -1;
    state.vid = "";
    state.yastep = 0;
  };
  //添加标签后重新获取
  const reget = () => {
    state.bqstep = 0; //关闭新增标签
    state.bqshow = false; //删除标签后关闭详情
    mainv.value.reget();
  };
  const getNote = () => {
    useApi.post("/arhome/getnotice", {}).then((res) => {
      state.notices = res.data.noticeList;
      if (state.notices.length < 1) {
        state.ntshow = false;
      } else {
        state.ntshow = true;
      }
    });
  };
  //标签查询
  const bqfilter = (id) => {
    mainv.value.setChoose(id);
  };
  
  let warningItem = ref({});
  let iswarning = ref(false);
  let alarmSound = ref();
  const alarm = (str) => {
    // ElMessage.warning(str);
    // state.hasev = true;
    warningItem.value = str;
    iswarning.value = true;
    alarmSound.value.play();
    setTimeout(() => {
      iswarning.value = false;
    }, 15000);
    setTimeout(() => {
      alarmSound.value.pause();
      alarmSound.value.currentTime = 0;
    }, 3000);
  };
  const evclose = () => {
    state.evshow = false;
    state.hasev = false;
  };
  
  let showMap = ref(false);
  const closeMap = () => {
    showMap.value = false;
  };
  
  // 高点动点切换
  const changptz = () => {
    state.showSmallvalue = !state.showSmallvalue;
    state.is3d = !state.is3d;
  };
  
  // rtsp展示
  let showRtsp = ref(false);
  
  const changeRtsp = () => {
    // showRtsp.value = !showRtsp.value;
    window.parent.postMessage(
      {
        type: "iframe",
        data: {
          type: "rtsp",
        },
      },
      "https://vp.bcdtech.cn:8787"
      // "http://localhost:5173"
    );
  };
  
  let diruction = ref("");
  const setdiruction = (info) => {
    diruction.value = info;
  };
  
  onMounted(() => {
  console.log('新包')
    let route = useRoute();
    //如果带token，保存后重新首页
    if (route.query.token) {
      let store = useMyStore();
      store.token = route.query.token;
      navigateTo("/");
    }
  
    useApi.post("/arhome/common/getparamdict", {}).then((res) => {
      let store = useMyStore();
      store.params.dict = res.data;
      //console.log('Success:', user);
    });
    getNote();
    getTags();
    // iframe页面
    window.addEventListener("message", (event) => {
      if (event.origin === "https://vp.bcdtech.cn:8787") {
        // 确保消息来自父页面
        // initPlayer();
        // play()
        if (event.data && event.data.cameraId) {
          gdchange(event.data);
        }
      }
    });
  
    emitter.on("setInstruction", (data) => {
      switch (data.deviceName) {
        case "ar-ewdt":
          showMap.value = !showMap.value;
          break;
        case "ar-ddhm":
          changptz();
          break;
        case "ar-bjxx":
          evclick();
          break;
        case "ar-bqgl":
          tgclick();
          break;
        case "ar-gdlb":
          ifclick();
          break;
        case "ar-lwms":
          changeRtsp();
          break;
      }
    });
    //getAlarm()
  });
  </script>
  
  <style lang="scss" scoped>
  .main {
    position: relative;
    // width: 3840px;
    // height: 1620px;
    width: 100%;
    height: 100%;
  }
  
  .btn01 {
    position: absolute;
    right: 5.5%;
    top: 4.26%;
    width: 32px;
    height: 32px;
    background-image: url("/images/bt01.png");
  }
  
  .btn02 {
    position: absolute;
    right: 3%;
    top: 4.26%;
    width: 32px;
    height: 32px;
    background-image: url("/images/bt02.png");
  }
  
  .btn03 {
    position: absolute;
    left: calc(50% - 30px);
    bottom: 3.9%;
    width: 60px;
    height: 40px;
    background-image: url("/images/more.png");
  }
  
  .btn04 {
    position: absolute;
    left: calc(50% - 30px);
    bottom: 3.9vh;
    width: 60px;
    height: 40px;
    background-image: url("/images/more1.png");
  }
  
  .more {
    animation: moremove 2s infinite linear;
  }
  
  @keyframes moremove {
    0%,
    100% {
      bottom: 3.9vh;
    }
  
    50% {
      bottom: calc(3.9vh + 5px);
    }
  }
  
  .mn {
    position: absolute;
    left: calc(50% - 295px);
    bottom: 15%;
    width: 570px;
    height: 40px;
    display: flex;
  
    .img {
      cursor: pointer;
      width: 100px;
      height: 90px;
      margin: 0 10px;
  
      &:hover {
        opacity: 0.8;
      }
    }
  }
  
  .btn1 {
    // position: absolute;
    // right: 2.6%;
    // top: 9.8%;
    background-image: url("/images/new/btn2.png");
  }
  
  .btn10 {
    background-image: url("/images/new/btn22.png");
  }
  
  .btn2 {
    background-image: url("/images/new/btn4normal.png");
    &.isanimate {
      background-image: url("/images/new/btn4.png");
      animation: blink 1s infinite;
    }
  }
  
  @keyframes blink {
    0% {
      background: transparent;
    }
    50% {
      background-image: url("/images/new/btn4.png");
      background-size: 100% 100%;
    }
    100% {
      background: transparent;
    }
  }
  
  .btn20 {
    background-image: url("/images/new/btn4.png");
  }
  
  .btn21 {
    background-image: url("/images/new/btn44.png");
  }
  
  .btn3 {
    background-image: url("/images/new/btn1.png");
  }
  
  .btn30 {
    background-image: url("/images/new/btn11.png");
  }
  
  .btn4 {
    background-image: url("/images/new/btn3.png");
  }
  
  .btn40 {
    background-image: url("/images/new/btn33.png");
  }
  
  .btn5 {
    background-image: url("/images/new/switch/close.png");
  }
  
  .btn50 {
    background-image: url("/images/new/switch/active.png");
  }
  
  .loginp {
    position: absolute;
    left: 40%;
    top: 40%;
  }
  
  .inp {
    position: absolute;
    left: 4.5%;
    top: 5%;
  }
  
  .evcs {
    position: absolute;
    right: 296px;
    top: 375px;
  }
  
  .tgcs {
    position: absolute;
    right: 321px;
    top: 543.5px;
  }
  
  .ptzcs {
    position: absolute;
    right: 5%;
    bottom: 5%;
  }
  
  .onevcs {
    position: absolute;
    left: 23.6%;
    top: 13.6%;
  }
  
  .bkpmcs {
    position: absolute;
    left: 45%;
    top: 25%;
  }
  
  .bkvcs {
    position: absolute;
    left: 18.3%;
    top: calc(50% - 400px);
  }
  
  .infocs {
    position: absolute;
    left: 6%;
    top: 22%;
  }
  
  .xzcs {
    position: absolute;
    left: 40%;
    top: 37.8%;
  }
  
  .hbcs {
    position: absolute;
    left: 0;
    top: 0;
  }
  .hbcssmall{
    position: fixed;
    left: 0;
    top: 0;
    width: 397px;
    height: 297px;
    z-index: 10000;
  }
  
  .xzdcs {
    position: absolute;
    left: 42%;
    top: 20%;
  }
  .addPlancs {
    position: absolute;
    left: 42%;
    top: 20%;
  }
  .bqcs {
    position: absolute;
    left: 50%;
    top: 30%;
  }
  
  .notecs {
    position: absolute;
    left: 38%;
    top: 9%;
  }
  
  .yalcs {
    position: absolute;
    left: 38%;
    top: 29%;
  }
  
  .yaecs {
    position: absolute;
    left: 24%;
    top: 20%;
  }
  
  .yavcs {
    position: absolute;
    left: 0;
    bottom: 160px;
  }
  
  .syscs {
    position: absolute;
    left: 8vw;
    top: 14vh;
  }
  
  .tjcs {
    position: absolute;
    left: 0;
    top: 0;
  }
  .zoomv {
    position: absolute;
    left: 3vw;
    bottom: 3vh;
    width: 400px;
    height: 256px;
  }
  .zoomfull {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  </style>
  
  <style lang="scss" scoped>
  .right-menu {
    position: absolute;
    right: 250px;
    bottom: 130px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
    .menubtn {
      margin-left: 20px;
      width: 100px;
      height: 183px;
      background: url("/images/new/right.png");
      background-size: contain;
      transform: rotate(180deg);
      &.active {
        transform: rotate(0deg);
      }
    }
    .menu-tab {
      .img {
        width: 183px;
        height: 183px;
      }
    }
  }
  .l1 {
    background-image: url("/images/new/l1.svg");
  }
  .l11 {
    background-image: url("/images/new/l11.svg");
  }
  .l2 {
    background-image: url("/images/new/l2.svg");
  }
  .l22 {
    background-image: url("/images/new/l22.svg");
  }
  .small-video {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
  }
  .map-box-layer {
    position: absolute;
    top: 216px;
    left: 270px;
    z-index: 999;
  }
  </style>
  